@charset "utf-8";
/*
	scss公用方法定义
		1.全局样式规定。
*/
@mixin m($num:0){
	margin: $num;
}
@mixin p($num:0){
	padding: $num;
}
@mixin float-left{
	float: left;
}
@mixin float-right{
	float: right;
}
@mixin min-body-width{
	min-width: 1080px;
}
@mixin min-content-width{
	width: 1080px;
}
@mixin width($num:0px){
	width: $num;
}
@mixin height($num:0px){
	height: $num;
}
@mixin font-size($num:12px){
	font-size: $num;
}
@mixin backface-visibility($tyle:hidden){
    backface-visibility:$tyle;
    -webkit-backface-visibility:$tyle;
    -moz-backface-visibility:$tyle;
    -ms-backface-visibility:$tyle;
}
@mixin transition($num:.5s){
	transition: $num;
	-webkit-transition:$num;
	-moz-transition:$num;
    -o-transition:$num;
}
@mixin transition-delay($num:.5s){
    transition-delay: $num;
    -webkit-transition-delay:$num;
    -moz-transition-delay:$num;
    -o-transition-delay:$num;
}
@mixin transition-fn($num){
	transition: $num;
	-webkit-transition:$num;
	-moz-transition:$num;
    -o-transition:$num;
}
@mixin transform($num){
    transform: $num;
    -webkit-transform:$num;
    -moz-transform:$num;
    -o-transform:$num;
}
@mixin transform-origin($num){
    transform-origin: $num;
    -webkit-transform-origin:$num;
    -moz-transform-origin:$num;
    -o-transform-origin:$num;
}
// 模糊
@mixin filter($num){
    //blur(5px)
    -webkit-filter: $num;
    -moz-filter: $num;
    -o-filter: $num;
    -ms-filter: $num;
    filter: $num;
}
/*居中*/
@mixin content{
	@include min-body-width;
	@include min-content-width;
	@include m(0 auto);
}
/*去除浮动*/
@mixin clearfix{
	clear: both;
	&:after,
	&:before{
		content: '';
		display: table;
	}
}
@mixin btn{
	line-height: 30px;
	padding: 0 10px;
	border-radius: 3px;
	display: inline-block;
	cursor: pointer;
	color: #666;
	font-size: 12px;
}
// 按钮hover下滑线效果
@mixin btn-hover-line($time:.3s,$color:#333){
    &:after{
        @include transition($time);
        content: '';
        position: absolute;
        bottom: -5px;
        left:50%;
        width:0;
        border-bottom:1px solid $color;
    }
    &:hover{
        &:after{
            width: 100%;
            left:0;
        }
    }
}
@mixin box-shadow5{
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.14);
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.14);
    box-shadow: 0 0 5px rgba(0,0,0,0.14);
}
@mixin box-shadow($num){
    -moz-box-shadow: $num;
    -webkit-box-shadow: $num;
    box-shadow: $num;
}

@mixin animation($name,$time,$delay,$count,$function:linear){
	animation-name: $name;
	animation-duration: $time;
	animation-timing-function: $function;
	animation-iteration-count: $count;
	//animation-direction: alternate;
	animation-fill-mode : forwards;
	animation-delay:$delay;

	-webkit-animation-name: $name;
	-webkit-animation-duration: $time;
	-webkit-animation-timing-function: $function;
	-webkit-animation-iteration-count: $count;
	//-webkit-animation-direction: alternate;
	-webkit-animation-fill-mode : forwards;
	-webkit-animation-delay:$delay;

	-moz-animation-name: $name;
	-moz-animation-duration: $time;
	-moz-animation-timing-function: $function;
	-moz-animation-iteration-count: $count;
	//-moz-animation-direction: alternate;
	-moz-animation-fill-mode : forwards;
	-moz-animation-delay:$delay;

    -o-animation-name: $name;
    -o-animation-duration: $time;
    -o-animation-timing-function: $function;
    -o-animation-iteration-count: $count;
    //-o-animation-direction: alternate;
    -o-animation-fill-mode : forwards;
    -o-animation-delay:$delay;
}
@mixin radius($unit:0){
    -o-border-radius: $unit;
	-moz-border-radius: $unit;
	-webkit-border-radius: $unit;
	border-radius: $unit;
}
@mixin family() {
    font-family: "Helvetica Neue", Helvetica, Tahoma, sans-serif;
}

@mixin nav-link(){
    &:after,
    &:before{
        width: 50%;
    }
}

@keyframes error-icon{
    0%{
        @include transform(translateX(0px));
    }
    33%{
        @include transform(translateX(-5px));
    }
    66%{
        @include transform(translateX(5px));
    }
    100%{
        @include transform(translateY(0px));
    }
}
@-webkit-keyframes error-icon{
    0%{
        @include transform(translateX(0px));
    }
    33%{
        @include transform(translateX(-5px));
    }
    66%{
        @include transform(translateX(5px));
    }
    100%{
        @include transform(translateY(0px));
    }
}
@-moz-keyframes error-icon{
    0%{
        @include transform(translateX(0px));
    }
    33%{
        @include transform(translateX(-5px));
    }
    66%{
        @include transform(translateX(5px));
    }
    100%{
        @include transform(translateY(0px));
    }
}



@keyframes scale{
    0%{
        opacity:0;
        @include transform(scale(0));
    }
    80%{
        opacity:1;
        @include transform(scale(1.1));
    }
    100%{
        opacity:1;
        @include transform(scale(1));
    }
}
@-webkit-keyframes scale{
    0%{
        opacity:0;
        @include transform(scale(0));
    }
    80%{
        opacity:1;
        @include transform(scale(1.1));
    }
    100%{
        opacity:1;
        @include transform(scale(1));
    }
}
@-o-keyframes scale{
    0%{
        opacity:0;
        @include transform(scale(0));
    }
    80%{
        opacity:1;
        @include transform(scale(1.1));
    }
    100%{
        opacity:1;
        @include transform(scale(1));
    }
}
@-moz-keyframes scale{
    0%{
        opacity:0;
        @include transform(scale(0));
    }
    80%{
        opacity:1;
        @include transform(scale(1.1));
    }
    100%{
        opacity:1;
        @include transform(scale(1));
    }
}

//@-webkit-keyframes
//@-o-keyframes
//@-moz-keyframes
